La presentación 


Pere Barnola Augé 


P08/93133/01507 


Universitat Oberta 
de Catalunya 


www.uoc.edu 


O FUOC e P08/93133/01507 


La presentación 





Índice 


IntROAUCCIÓN ad laa ais 
1. Las hojas de estilo (USS)...............ooonnoccccnnnnnocccnnonooncnccnnnnnanncnnonannns 


2. Cómo se puede dar estilo a un documento XHTML.............. 
2.1. La vinculación CSS-XHTML ..occcnoccciononononnnnonannnnanonancnnnocanacinncnns 
2.2. Selectores y declaraciones ...commcononnocnnnnonnnnnonanonananonannnacnnanocananenns 
2.3. Propiedades de texto: tipOgIafÍa ....ccoconnnononnconacinnnannanananonnnanonanos 

EN A A ANT 
STO LE AP A EA 
A EO EE LOT O EIA E EE E E T E T 
E NN E er AAA 
ZS Font variant pe bessern e e ek e r EE EA TE E A Ene oa medra 
E A E 
A AAA AEAEE EEEE aS 
AA AO 
2,4. Propiedades de texto: espaciado ...ccccooccnnoonnncnannanonananinacacinanacinno 
A NS 
2A VERA RA a ca e GA as DECIDE DEA 
2A3, VTERbPInden bana a a DA A DR TA ERA GDR 
2443 Lineheighi de e peda dades de EE 
2.4.5: Words paci Np de da est EU E a AA RIÓS 
2:40.) VEter-SPACIN E AA A AT TA donen encac io eee data 
E SA ET 
e A A TS 
2.5. Propiedades de disposición: estructura de Caja s.s.s 
A A a E EA a a EEE EEEE RE aa Ra T 
2.5.2. Margin-top, margin-right, margin-bottom, 
margin- lei oreina aE E EN E SAT 
AEE e O A A DA DC 
2.5.4. Padding-top, padding-right, padding-bottom, 
DA RRA 
2.5.5. Border, border-top, border-right, border-bottom, 
border let asista RRE 
29:0, Borderwidth age n Rk 
2.5.7. Border-top-width, border-right-width, 
border-bottom-width, border-left-width .............ommmm.... 
Zi e BOTOEI E ii AA AA AA 
2.5.9. Border-top-style, border-right-style, 
border-bottom-style, border-left-style ........ocoonmmmommmmmmm.. 
2.3: 10 +BOTd Er COLO AA AA AA A R 


10 
13 
13 
15 
17 
19 
20 
20 
20 
21 
21 
21 
22 
22 
22 
22 
23 
23 
23 
24 
24 


25 
26 


27 


29 
31 


32 
32 


32 
33 


O FUOC e P08/93133/01507 


La presentación 





2.6. 


2.7. 


2.8. 


2.9. 


2.5.11. Border-top-color, border-right-color, 


border-bottom-color, border-left-color ............ 
E a DO De dO CU TRA 
ZO TIM NIA enrii eina EA A ADE Dinis 
259: VA: MaAXEWIA TN esto ena iaa 
ZO LO HO AA AUTOS 
ASDO, MU DO a E 
2:17. Max ele na id 
ZOO OVETLOX ii tad 
LI LIC A A 
Propiedades de disposición: posicionamiento ...ccoocccnnnnccnoninnnón. 
AO DISPLAY id it ta 
20:20 POSO ii AA AA 
2.6.3. Top, right, bottom, left .....oooonocccnnonnccccnnnnnacnnnnnnananananinnn ns 
PAR TE E I O EEE add 
ZO Cleat ai A 
ZOO: ALAN tias 
LOL VISIDIIE A a 
Propiedades de disposición: fondo ..ccconcccconcccnonaccnnnnas: 
2.7.1. Background-attachment ....oocccnnoccnnnnnnaninnnaninnnss 
2T 2r Backoround-cColot eunes e REA 
2.7.3. Background-iMage eomocccnocononnnonanonnaninananinacacinnna 
2.7.4. Background-positi0W ...oomccnonncononnnnncnnnannananananananacananacinnnss 
2.7.5. BackgrOUTA-TOpeat coococcnnccncnonnnocinanacinanacinnnncnnnnss 
2.7.0: BACKBTO Ud iii ios 
Elemento iaa iaa dA 
ZO Xo Lita as 
28:2 Tablas: miine oan na a a a iasa N 


E O A e a a a nni 


2.10. Caso práctico: "dando estilos a nuestra primera web" 


33 
34 
36 
36 
37 
37 
37 
37 
38 
38 
39 
40 
40 
41 
43 
44 
44 
45 
45 
45 
47 
47 
48 
48 
49 
49 
52 
57 
57 
58 


O FUOC e P08/93133/01507 5 


La presentación 





Introducción 


Como ya hemos ido diciendo en los capítulos anteriores, una de las claves 
para construir un documento web de forma correcta es separar el contenido de 
como éste se presenta. En el contenido, sólo tendrá que haber las etiquetas que 
describen el contenido, pues no requiere ninguna etiqueta de representación 
O de estilos para transmitir completamente su mensaje. El hecho de que la 
presentación vaya por otra parte nos facilitará modificar la visualización del 
contenido en función del medio en que lo queramos mostrar. Por lo tanto, nos 
dará mucha flexibilidad al mismo tiempo de modificar el "look and feel" de 
una web. Por ejemplo, si el contenido se tiene que ver en un teléfono móvil, 
es lógico que modifiquemos el diseño para mejorar la legibilidad y usabilidad 


en este entorno, aunque el contenido sea el mismo. 


La tecnología que nos permitirá dar estilo, con cierta facilidad, a nuestro do- 
cumento web serán las CSS. En los próximos capítulos las veremos en profun- 
didad. 


Contenido 


complementario 





CSS son las siglas de cascading 
style sheets, es decir, hojas de 
estilo en cascada. 








CSS Zen Garden 


En la web siguiente, pode- 
mos ver cómo un mismo 
contenido se puede visualizar 
de manera completamente 
diferente sólo con el hecho 
de modificar el estilo: http:// 
Www.csszengarden.com 
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1. Las hojas de estilo (CSS) 


Las hojas de estilo en cascada (cascading style sheets) son un mecanismo sim- 
ple que nos describe cómo se muestra un documento en la pantalla del orde- 
nador, o cómo se imprime, o incluso cómo se pronuncia la información del 


documento en un dispositivo de lectura. 


Con las CSS, tendremos un control total sobre el estilo y el formato de nues- 
tros documentos. Cualquier cambio realizado en el estilo establecido para un 
elemento afectará a todas las páginas vinculadas a la CSS en las cuales aparezca 


este elemento. 
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2. Cómo se puede dar estilo a un documento XHTML 


La CSS funciona con declaraciones sobre el estilo de uno o más elementos. 
Por lo tanto, las hojas de estilo están compuestas por una o más declaraciones 
referidas a elementos de un XHTML. Una declaración (regla) tiene dos partes: 
una propiedad y el valor de la propiedad. 


Ejemplo 


p (font-size: 10em;) en este caso p es el selector y (font-size: 10em;) la decla- 
ración. 


El selector es el que nos hace de enlace entre el documento y el estilo, especi- 
ficando qué elementos se verán afectados por la declaración. Y la declaración 
es la parte que nos dice cómo se ven afectados los elementos. En el ejemplo, 
estaríamos indicando que todos elementos p se verán afectados por la decla- 
ración que establece que la propiedad font-size tendrá el valor 10em para todos 
los elementos p del documento o documentos que estén vinculados a la hoja 
de estilo. 


A continuación, veremos las formas en que se puede hacer esta vinculación y 


todas las propiedades que podemos tener en una declaración. 
2.1. La vinculación CSS-XHTML 


Hay diferentes maneras de dar estilo a un documento mediante CSS, aunque 
hay algunas que rompen con la premisa de separar el contenido de la presen- 


tación. 


La mejor manera de hacerlo, y la más recomendable, es utilizando una hoja de 
estilo externo que se vinculará al documento mediante el elemento <1ink>, el 
cual tiene que estar situado dentro de la sección <head>. En este caso, la hoja 
de estilo estará en un archivo con extensión ".css" totalmente separado del 
"xhtml". Lo cual nos permitirá que, al modificar el archivo .css, se modifiquen 


los estilos de todos los documentos donde está vinculado. 


Lo primero será crear un archivo donde colocaremos nuestros estilos. Este fi- 
chero lo iremos construyendo a medida que expliquemos las propiedades prin- 
cipales y más utilizadas de css (el resto de propiedades las dejaremos como 
referencia). Lo guardaremos" como "estilos.css" en el mismo lugar donde tene- 
mos el "index.html" que creamos en el módulo 1. Una vez creado, abriremos 


nuestro documento XHTML y añadiremos el siguiente código a la cabecera. 


<?xml version="1.0" encoding="UTF-8"?> 


<!DOCTYPE html PUBLIC "=//W3C//DID XHIML 1.0 Strict//EN" 
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WEIL MS OCA TA ¿DTD calls trLoL. atar 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomía" /> 


<title>Introducción a la gastronomía de la Garrotxa</title> 


<link href="estilos.css" rel="stylesheet" type="text/css" /> 
</head> 


<body> 


De esta manera ya tendremos realizada la vinculación entre el archivo 
"estilos.css", que es donde tendremos todos los estilos de nuestro documento, 


el archivo "index.html", que es donde teníamos el contenido. 
y q 


Como hemos dicho, hay otras formas de dar estilos a un documento, aunque 
rompen ligera o completamente la premisa de separar el contenido de los es- 


tilos. 


Se puede utilizar el elemento “style” en el interior del documento al cual se 
quiere dar estilo, y que generalmente se situará dentro de la sección <head>. 
Se opta por hacerlo de esta manera cuando los estilos se utilizan sólo en el 


documento en concreto. 


Aquí tenemos un ejemplo: 


<?xml version="1.0" encoding="UTF-8"?> 

<IDOCIYPE emi PUBLIC: "=/IMSE//DID XHTML LD Sick ¿EN 

"http: //www.w3.org/TR/xhtml11/DTD/xhtmll-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomía"/> 
<title>Introducción a la gastronomía de la Garrotxa</title> 

<Style type="text/css"> 

body { 

padding-left: llem; 

font-family: Georgia, "Times New Roman", Serif; 

COMORES 

background-color: +td8da3d; 

} 

Il 

font-family: Helvetica, Geneva, Arial, Sans-serif; 

} 


</Style> 


O FUOC e P08/93133/01507 10 


La presentación 





</head> 


<body> 


También se podrían utilizar los estilos directamente sobre aquellos elementos 
que lo permiten por medio del atributo <style> dins del <body>. Sin embar- 
go, este tipo de definición sí que rompe totalmente con las ventajas que nos 


ofrece el hecho de no mezclar el contenido con la presentación. 


2.2. Selectores y declaraciones 


Como hemos avanzado en la primera parte, los CSS constan de reglas o decla- 
raciones que relacionamos con los elementos de nuestro documento XHTML 


mediante los selectores. 


Ejemplo 


En este ejemplo, p{color: red; }, el selector p, le dice al navegador la parte del docu- 
mento que se verá afectado por la regla. 


Los selectores pueden aparecer individualmente o agrupados, separándolos 


con comas: 


Por tanto, esto 


¡A 
color: red; 


} 
sería lo mismo que: 


CREON E AN 
mE COLOCA rO 


COMO Tedy 


La propiedad que en el caso del ejemplo anterior sería "color" especifica qué 
aspecto cambiaremos. En el ejemplo, cambiaríamos el color. Las propiedades 
que se quieren modificar para un mismo selector se pueden agrupar separán- 


dolas mediante un punto y coma. 


p [text-align:center; color:red;) 


Normalmente, describiremos una propiedad por línea de la manera siguiente: 


A! 

padding-left: llem; 

font-family: Georgia, "Times New Roman", Times, Serif; 
GOTor: red; 


background-color: +td8da3d; 
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El valor, representado a la derecha de los dos puntos (: ), establece el valor de 
la propiedad. Es importante recordar que si el valor está formado por más de 


una palabra, se tiene que poner entre comillas. 


PR EOS Ran SOS ES tie a) 


Hay diferentes tipos de selectores. 


Los selectores de elemento o etiqueta, que hacen referencia directa a 
elementos o etiquetas que nos encontramos en el documento XHTML 
y son los que hemos visto en los ejemplos anteriores. 


Los selectores de id, que hacen referencia al identificador de una sec- 
ción o elemento dentro de nuestro XHTML. 


+1d (la declaración ) 
Nos permite aplicar estilo a una parte única de nuestro documento identifica- 
da por un atributo id, cuyo valor será el nombre del selector. 
Hemos de tener en cuenta que el ID será un identificador único para un ele- 
mento dentro del documento, por lo que los estilos sólo podrán afectar a una 
única parte del documento, al contrario de los selectores de clase, que veremos 
más adelante. 
Por ejemplo, si en nuestro documento XHTML tenemos un elemento 


<div id="capsa"></div> 


Para referirnos a él desde la hoja de estilos, escribiríamos lo siguiente dentro 


del documento CSS: 


fcapsa (font-family: "sans serif"; ) 


Y estos estilos sólo afectarían al contenido dentro del elemento que tiene el 


id=caja. 
Los selectores de clase son los que se relacionan con los elementos o partes 
de nuestro XHTML, que tienen como valor del atributo clase el nombre del 


selector. 


.Clasel (la declaración ) 
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A diferencia de los selectores de id, los selectores de clase se pueden relacionar 
con diferentes elementos o partes de nuestro documento XHTML que estén 


identificados con la "clase" en la cual hemos definido los estilos. 


Por ejemplo, si tenemos el siguiente código en el XHTML: 


<p class="vermell"> 
Hola este texto es rojo. Pero la siguiente palabra es 
<span class="amarilla">amarilla</span> 


po 


Para definir las clases "rojo" y "amarilla", que después podremos reutilizar en 


otras partes del documento, haríamos lo siguiente en nuestro documento CSS: 


ROMO E olor O OOO 


amarilla (color: fFEEFFOO; ) 


También tenemos los selectores contextuales, que se relacionan con elementos 
O partes de nuestro XHTML para el tipo de elemento y el contexto que se 
especifica en el selector. 


Serán del tipo: 


Contexto elemento (la declaración); 


Cuando decimos contexto de un elemento nos referimos a los antecedentes 


del elemento, es decir, a los padres. 


Por ejemplo, si tenemos el código siguiente: 


<div id="cap"> 

<ul> 

<li>elemento 1 lista</li> 
<li>elemento 2 lista</li> 
</ul> 


</div> 
El contexto del elemento 1 de la lista sería el siguiente "**cap ul li", que resu- 
miendo querría decir "los li, dentro de ul, dentro de elemento con id cap". Por 
lo tanto, si en nuestra hoja de estilos tuviéramos lo siguiente: 


fcap ul 1i (font-family: "sans serif";) 


Estos estilos sólo se aplicarían a los elementos que cumplieran este contexto. 
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Hay que tener en cuenta que, para un elemento, siempre mandarán los selec- 


tores contextuales sobre tipos de selectores más genéricos. 


También están los selectores de atributo, que se relacionan con los elementos 
que contienen un atributo con el valor que se especifica en el selector cuando 
se aplican los estilos. De este tipo selector no hablaremos mucho, ya que no 
lo soportan la mayoría de navegadores. Sólo pondremos la forma por si os lo 


encontráis alguna vez. 


Son del estilo: 


Selector[atributo="valor"] (la declaración ); 


Quiere decir que los estilos sólo se aplicarán al elemento dentro del documen- 
to que contenga el atributo que se especifica igual al valor del atributo que 
especificamos en el selector. 


Como última cosa antes de empezar a ver las diferentes propiedades que po- 
demos modificar para aplicar estilos en los documentos, cabe decir que tene- 
mos que considerar que los estilos se heredan. ¿Qué quiere decir eso? Que al- 
gunos elementos heredan los estilos de su padre, a menos que se especifique 


lo contrario. 


Ejemplo 
Por ejemplo, si defino un tipo de letra para el elemento <body>, por defecto, si no espe- 


cifico lo contrario, todos los elementos de mi documento dentro del body, tomarán ese 
tipo de letra. 


2.3. Propiedades de texto: tipografía 
Comencemos a ver las propiedades que podemos modificar en un selector que 
se aplique a texto: tipografía, color, fuente, decoración, alineación, espacios, 


etc. 


De los elementos de texto, podemos modificar dos tipos de propiedades: las 
que se refieren a la tipografía, y las que se refieren al espaciado. 


Las propiedades que podemos variar para la tipografía son las siguientes: 
2.3.1. Color 

Esta propiedad nos permite especificar el color del texto. 

Valor: el valor puede ser el color en rgb (rgb (100%, 50%, 0%), rgb (255, 128, 
0)), el color en hexadecimal (+ffa500, #008000, #800080), o uno de los 17 


nombres de colores predefinidos (aqua, black, blue, fuchsia, gray, green, lime, 
maroon, navy, olive, orange, purple, red, silver, teal, white, yellow). 
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La propiedad color se hereda, o lo que es lo mismo, si no se especifica, toma 
el valor del padre. 


Se puede aplicar a todos los elementos y lo soportan todos los navegadores. 


Seguidamente, algunos ejemplos: 


nt colon Lime; 
pi color: FEEDDOD, + 


ANECA 


Siguiendo con nuestro ejemplo, abrimos el archivo "estilos.css" y añadimos 


este código: 


body { 
COMORAS SS 13), 
i 


n2 { 
color:t3366FF; 


) 


CA lola 


Archivo Edición Formato Ver Ayuda 


noty { 
7 or: #333333; 


h2 {í 
color :#3366FF; 





Vemos el efecto sobre la página que estamos construyendo. Si abrimos ahora el 
archivo "index.html" con nuestro navegador, veremos de qué manera afectan 


a estos estilos que acabamos de incorporar en el fichero estilos.css: 
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Introducción a la gastronomía de la Garrotxa - Mozilla Firefox -Iof xi 
Archivo Editar Ver Historial Delicious Heramientas Ayuda 


9 [ea xX A El kd (a | tle:///C:/Documents LY” [Glz Google JE 























La gastronomía en la Garrotxa 


Menú 


- Introducción 


- Platos típicos 
3. Estadisticas 


to e 


1. Introducción 





E 
[FE | Terminado MIÍdEOIM y 


Los textos que están con encabezamientos de nivel 2, como "1. Introducción", 


se ven afectados por el estilo: 


H2 f 
color:+t3366FF; 


) 


Veamos, pues, cómo el texto sale de color azul. 


2.3.2. Font-family 


Es una lista de nombres de familias de fuentes en orden de prioridad. En los 
ordenadores, no siempre tenemos todas las fuentes instaladas. Existen las lla- 
madas "fuentes de sistema", que en principio las tiene todo el mundo. En esta 
propiedad se hará caso a la primera fuente de la lista que exista en el ordena- 
dor, donde se está visualizando el documento. Por ejemplo, si se especifica 
font-family: Arial, Verdana; y resulta que, en mi ordenador, no tengo Arial 
pero sí Verdana, lo vería en Verdana. 


El valor de la propiedad, como hemos dicho, es una lista de familias de fuentes 


mon 
po 


separadas por coma 


También es una propiedad que se hereda, se puede aplicar a todos los elemen- 
tos y la soportan todos los navegadores principales. 


Un ejemplo sería el siguiente: 


pl 
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font-family: Arial, Helvetica, Sans-serif; 


) 


Seguimos con nuestro ejemplo "estilos.css". Añadiremos ahora este código: 


body { 

font-family: Georgia, "Times New Roman", Serif; 
color: aR O BBO 

I 


E 
font-family: Helvetica, Geneva, Arial, Sans-serif; 


} 


b2 {í 
color:+t3366FF; 


) 


CE o 
Archivo Edición Formato Ver Ayuda 

body { 

font-family: Georgia, "Times New Roman", serif; 

color: #333333; 


h1 { 
font-family: Helvetica, Geneva, Arial, sans-serif; 


h2 {í 
color :#3366FF; 





Introducción a la gastronomía de la Garrotxa - Mozilla Firefox | [O] XI 


a - E x A E| kJ ta | file:///C:/Documents mí > y 




















La gastronomía en la Garrotxa 


Menú 


1. Introducción 


2. Platos típicos 
3. Estadísticas 


1. Introducción 


E 
[FR | Teminado MIME [MN y 
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2.3.3. Font-size 


Esta propiedad nos permite establecer la medida de la fuente a utilizar. Su valor 
se puede especificar con una "medida", un "porcentaje" o alguna de las medidas 
absolutas o relativas predefinidas. 


Lo que explicaremos ahora sobre las diferentes maneras de asignar las medidas 
se puede aplicar también a otras propiedades que requieran como valor una 


medida. 


Una "medida" será un número decimal seguido de una unidad. 


Las unidades absolutas son las siguientes: 


mm: (milímetro) 

cm: (centímetro, 1 cm = 10 mm) 
in: (pulgada (inch), lin = 2,54 cm) 
pt: (punto, 1 pt = 1/72 in) 

pc: (pica, 1 pc = 12 pt) 


Las unidades relativas son aquellas que, a pesar de la redundancia, son rela- 
tivas a una medida del documento. En general, a la medida de la fuente. Estas 
unidades son: 


em: (1 em = medida de la fuente actual) 
ex: (1 ex = altura de la letra 'x' en la fuente actual) 


Si la medida que especificamos es de 2 em, y la medida de la fuente actual es 
10 px, la medida que hemos especificado será de 20 px. El hecho de especificar 
las medidas en unidades relativas es especialmente útil en el caso de hacer 


diseños que se adapten a la medida de la pantalla del usuario. 


La unidad más utilizada, sin embargo, es el px (píxel). 


También podemos especificar las medidas de forma relativa en porcentajes. 


En el caso de las medidas predefinidas, también las tenemos de dos tipos: 


1) Las absolutas, 


Medidas absolutas 


Las medidas absolutas con su correspondencia con los encabezamientos y el factor de 
escala: 
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Medida Factor de escala Encabezamiento 
xx-large 2 h1 

x-large 1.5 h2 

Large 1.2 h3 
Medium 1 h4 

Small 0.89 h5 

x-small 0.75 
xx-small 0.6 h6 











2) Las relativas en las cuales podemos especificar "larger", que aumentará la 


fuente actual un paso y "smaller" que la decrementará. 


El valor por defecto de la propiedad font-size es el valor predefinido "medium". 
Es decir, si no especificamos nada, el valor será "medium". Es una propiedad 
que hereda, lo que quiere decir que toma la medida de su padre si no se espe- 
cifica lo contrario. Se puede aplicar a todos los elementos y la soportan todos 


los navegadores principales. 
Aquí podemos ver algunos ejemplos: 


pl 
font-size:1l0px; 


) 


.classel( 
font-size:x-large; 


) 


#peu{ 
font-size:smaller; 


} 
En nuestro ejemplo, añadimos el siguiente código en el archivo "estilos.css": 


body { 

font-family: Georgia, "Times New Roman", Serif; 
color #333333; 

tonto Llpx; 


} 


BEA 
font-family: Helvetica, Geneva, Arial, Sans-serif; 


) 
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H2 { 
color:+t3366FF; 


) 


(# estils.css - Bloc de notas islas 
Archivo Edición Formato Ver Ayuda 

body { 

font-family: Georgia, "Times New Roman", serif; 

color: #333333; 

font-size: 11px; 


at 
font-family: Helvetica, Geneva, Arial, sans-serif; 


h2 {í 
color :#3366FF; 





Ahora veremos el impacto de éste cuando visualizamos nuestro archivo en el 


navegador: 


Introducción a la gastronomia de la Garrotxa - Mozilla Firefox -of x] 
Archivo Edtar Ver Historial Delicious Herramientas Ayuda 


9 CX ka Ofi: 


La gastronomia en la Garrotxa 
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1. Introducción 


Cràter de Santa Marg 


El 
[FF | Terminado MIdEoIM y 





Como vemos, la tipografía de las listas que hay dentro del "body" ha tomado 
la nueva medida, igual que lo ha hecho el resto de texto genérico. 


2.3.4. Font-style 


Especifica el estilo oblicuo o itálico dentro de la familia de fuente actual. 


Los valores que puede tomar esta propiedad son: "normal", "italic", u "oblique". 
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El valor por defecto es "normal"; es una propiedad que hereda del padre el 
valor si no se especifica, es aplicable a todos los elementos y la soportan todos 


los navegadores. 
.Clasel(font-style:oblique;) 
Hcos[font-style:italic;) 
2.3.5. Font-variant 


Esta propiedad determina si la fuente se muestra en mayúsculas de tipo normal 
o pequeñas "small-caps". Éstas se muestran de forma que todas las letras de una 
determinada palabra están en mayúsculas con caracteres ligeramente mayores 


que las minúsculas. 


Los valores que se pueden especificar son "normal" o "small-caps". El valor 
por defecto es "normal"; es una propiedad que hereda del padre el valor si 
no se especifica, es aplicable a todos los elementos y la soportan todos los 


navegadores. 
2.3.6. Font-weight 


Especifica el grueso de la fuente actual. Podemos definir que sea en negrita, 
normal o delgada. 


Los valores que se pueden especificar son: "normal", "bold", "lighter", o uno 
de 9 valores numéricos (100, 200..., 900). El valor por defecto es "normal". Es 
una propiedad que hereda del padre el valor si no se especifica, es aplicable a 
todos los elementos y la soportan todos los navegadores. 


pí font-weight:bold; ) 


aí font-weight:400: ) 
2.3.7. Text-decoration 


Especifica si el texto aparece subrayado, con una línea superior, rayado, o con 


parpadeo. 


Los valores que se pueden especificar son: "none" (ninguno), "underline" 
(subrayado), "overline" (línea superior), line-through" (rallado) o "blink" (par- 
padeo). 


El valor por defecto es "none"; es una propiedad que no hereda del padre el 
valor si no se especifica, es aplicable a todos los elementos y la soportan todos 


los navegadores. 
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A continuación, podemos ver el ejemplo más típico con los enlaces. Los en- 
laces están, por defecto, subrayados y de color azul. Una cosa que no hemos 
dicho es que los enlaces pueden tener diferentes estados. El estado normal, el 
estado cuando tenemos el ratón encima (mouseover), o el estado de visitado, 


que quiere decir que ya le hemos hecho clic. 


En el ejemplo siguiente, hacemos referencia al estado normal "a", y al estado 
de mouseover "a:hover". Por lo tanto, el enlace se verá sin subrayado en el 
estado normal, y cuando nos pongamos encima (mouseover) aparecerá la línea 


superior tal como estamos especificando. 


alí text-decoration:none; ) 


a:hoverí text-decoration:overline; ) 


2.3.8. Text-transform 


Permite al texto transformarse en alguna de las cuatro propiedades: "capitalize" 
(la primera letra con mayúscula), "uppercase" (todas las letras con mayúsculas), 
"lowercase" (todas las letras con minúsculas), "none" (ningún efecto sobre el 


texto). 


Los valores que se pueden especificar son: "capitalize", "uppercase", "lowerca- 
se", "none". El valor por defecto es "none"; es una propiedad que hereda del 
padre el valor si no se especifica lo contrario, es aplicable a todos los elementos 
y la soportan todos los navegadores. 


pí text-transform:lowercase; ) 


2.4. Propiedades de texto: espaciado 


Las propiedades que podemos variar con respecto al espaciado de texto son 


las siguientes: 


2.4.1. White-space 


Especifica cómo se comportarán las tabulaciones, los saltos de línea y el espacio 


extra en blanco en el contenido del elemento especificado. 


Los valores que se pueden especificar son: "normal","pre", "pre-wrap", "pre-li- 
ne". El valor por defecto es "normal"; es una propiedad que hereda del padre el 
valor si no se especifica, es aplicable a elementos de blog y la soportan todos 
los navegadores, excepto las propiedades "pre-wrap" y "pre-line", que fue aña- 
dido en el CSS 2.1 y sólo la soportan ciertos navegadores. 


pí white-space:nowrap; ) 
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2.4.2. Text-align 


Especifica la alineación horizontal de las líneas de texto. Podremos alinear un 


texto a la izquierda o a la derecha, en el centro o justificado. 
Los valores que se pueden especificar son: "left", "right", "center", "justify". El 
valor por defecto es "none", es una propiedad que hereda del padre el valor si 
no se especifica, es aplicable a todos los elementos de blog y la soportan todos 
los navegadores. 

Piet Us publ, e, 
2.4.3. Text-indent 
Especifica la imbricación de la primera línea de texto de un párrafo. 
El valor es una medida. El valor por defecto es "0", es una propiedad que hereda 
del padre el valor si no se especifica, es aplicable a todos los elementos de blog, 
y la soportan todos los navegadores. 

pí text-indent:10px; ) 
2.4.4. Line-height 
Especifica la distancia mínima entre líneas base de texto. 
Los valores que se pueden especificar son un factor, una medida o bien un 
porcentaje. El valor por defecto depende del navegador, es una propiedad que 
hereda del padre, el valor si no se especifica es aplicable a todos los elementos, 


y la soportan todos los navegadores. 


El factor es un número decimal (por ejemplo, 1.2) que multiplicará la medida 


de fuente actual para calcular la nueva medida. 

pí line-height:1.2; ) 
2.4.5. Word-spacing 
Especifica la cantidad adicional de espacio entre palabras. 
Los valores que se pueden especificar son "normal" o una medida. El valor por 
defecto es "normal"; es una propiedad que hereda del padre, el valor si no se 
especifica lo contrario es aplicable a todos los elementos y la soportan todos 


los navegadores. 


pí word-spacing:10; ) 
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2.4.6. Letter-spacing 
Especifica la cantidad adicional de espacio entre letras. 


Los valores que se pueden especificar son "normal" o una medida. El valor 
por defecto es "normal", es una propiedad que hereda del padre, el valor si 
no se especifica, es aplicable a todos los elementos y la soportan todos los 


navegadores. 
pí letter-spacing:10; ) 
2.4.7. Vertical-align 


Sirve para alterar la ubicación vertical de un elemento en línea, en relación a 


su elemento padre o a la línea del elemento. 


El valor puede ser un porcentaje relativo a la altura del elemento, que elevará 
la línea de base del elemento en la cantidad especificada por encima de la línea 
de base del padre. No se permiten valores negativos. 


El valor también puede ser una palabra clave. Las siguientes palabras clave 


afectan a la ubicación en relación con el elemento padre: 


e Baseline: alinea líneas base del elemento y el padre; 

e Middle: alinea el punto medio vertical del elemento con la línea de base 
más la mitad de la altura de la letra "x" del padre. 

e Sub: subíndice. 

e Super: superíndice. 

e Text-top: alinea las partes inferiores del elemento y la fuente del elemento 
padre. 

e  Text-bottom: alinea las partes inferiores del elemento y la fuente del ele- 
mento padre. 


El valor por defecto es "baseline"; es una propiedad que no hereda del padre, 
el valor si no se especifica es aplicable a todos los elementos de línea, y la 
soportan todos los navegadores. 

imgí vertical-align:middle; ) 
2.4.8. Direction 
Especifica la dirección de escritura. Ésta puede ser de izquierda a derecha ("Itr") 


o de derecha a izquierda ("rtl"). Se utiliza, básicamente, para los lenguajes que 


se escriben de derecha a izquierda como el árabe. 
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El valor por defecto es "Itr", es una propiedad que hereda del padre el valor 
si no se especifica, es aplicable a todos los elementos y la soportan todos los 
navegadores. 

P direction nee i 


2.5. Propiedades de disposición: estructura de caja 


En cuanto en las propiedades de disposición ("layout", estructura de cajas, altu- 
ra, anchura, margen, "padding", fondo, etc.), las podemos dividir en tres tipos: 


1) Las de "estructura de caja", 
2) las de posicionamiento, 
3) y las de fondo. 
Las propiedades de "estructura de caja" son las siguientes: 
2.5.1. Margin 
Especifica las cuatro propiedades individuales del margen de una vez. 
div (margin: lem 2em 3em 4em } 
Donde cada uno de los valores corresponde a los márgenes superior, derecho, 
inferior e izquierdo respectivamente en este orden. Si sólo tenemos un valor, 
se aplica a todos los lados. Si tenemos dos o tres valores, los valores restantes 
se toman del lado opuesto. 
margin: lem; 
(todos los márgenes = lem) 
margin: lem 2em; 
(superior e inferior = 1em, derecho e izquierdo = 2em) 
margin: lem 2 m 3m; 
(superior = 1em, derecho e izquierdo = 2em, inferior = 3em) 


margin: lem 2em 3em 4em; 


(superior = 1em, derecho = 2em, inferior = 3em, izquierdo = 4em) 
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Los posibles valores son hasta cuatro valores que pueden ser una medida, un 
porcentaje o "auto". El valor por defecto es "0", es una propiedad que no hereda 
del padre el valor si no se especifica, es aplicable a todos los elementos y la 


soportan todos los navegadores. 


2.5.2. Margin-top, margin-right, margin-bottom, margin-left 


Son cuatro propiedades y especifican el espacio entre el elemento seleccionado 
y los elementos que están al lado. Es decir, los márgenes, igual que hacía la 


propiedad "margin", pero especificando cada uno por separado. 


Los valores que se pueden especificar son: un número, un porcentaje o bien 
"auto". El valor por defecto es "0", es una propiedad que no hereda del padre 
el valor si no se especifica, es aplicable a todos los elementos y la soportan 


todos los navegadores. 


pl 
margin-bottom:10px; 
margin-left:auto; 
margin Ague auco, 
margins COPADA, 

) 


Seguiremos ahora con nuestro archivo de ejemplo. Abriremos el archivo 


"estilos.css" y añadiremos el código siguiente: 


pody 4 

font-family: Georgia, "Times New Roman", Serif; 
COLOR ASS OSO 

Lone sizes Llpx 


) 


AL A 
font-family: Helvetica, Geneva, Arial, Sans-serif; 


) 


h2 ( 
color:1t3366FF; 


) 


tfcontenido ( 
margin ps OP OPR AS, 
} 


#contenido address { 


margin cop: LOPA; 
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CERAS Jal xj 
Archivo Edición Formato Ver Ayuda 


h2 
ca :#3366FF; 


#contingut { 
lis 30px 10px Opx 32%; 


*contingut address ( | 
pe top:10px; 





Vemos la visualización en el navegador: 


Introducción a la gastronomía de la Garrotxa - Mozilla Firefox Ox] 
Archivo Editar Ver Historial Delicious Herramientas Ayuda 


A an 
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1. Introducción 


Cràter de Santa Margarida 





Podemos observar que todo el contenido dentro de la capa "content" se ha 
desplazado a la derecha la cantidad que le hemos especificado. 


2.5.3. Padding 


Para que nos entendamos, el "padding" es el "relleno". Si tenemos una caja que 
tiene contenido, el "margin" (margen), como hemos visto, sería el espacio que 
esta caja mantendrá en la parte de fuera enfrente de contenidos vecinos. Es 
decir, si especificamos 10px, nuestra caja estará separada del contenido 10px 
(dejamos 10px de margen). En cambio, el "padding" (relleno) es el espacio que 
tendrá que respetar el contenido de dentro de la caja con los límites de la caja. 


En el siguiente esquema, lo veremos más claro. La línea verde sería el "padding" 


y la línea roja el "margin". 
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Después de esta nota, seguimos con el "padding". El "padding" nos especifica 
las cuatro propiedades de espacio entre el borde y el contenido del texto de 


una vez. Se aplica siguiendo el mismo mecanismo que la propiedad "margin". 


Los posibles valores son hasta cuatro valores, que pueden ser una medida o 
un porcentaje. El valor por defecto es "O". Es una propiedad que no hereda del 
padre el valor si no se especifica, es aplicable a elementos y la soportan todos 


los navegadores. 


2.5.4. Padding-top, padding-right, padding-bottom, padding-left 


Especifica la cantidad de espacio que hay que insertar entre el contenido de 


un elemento y su margen o borde. 


Los valores que se pueden especificar son: un número o un porcentaje. El valor 
por defecto es "0". Es una propiedad que no hereda del padre el valor si no se 
especifica, es aplicable a elementos y la soportan todos los navegadores. 


pl 
padding-bottom:10px; 
padding-left:auto; 
padding-right:auto; 
padding-top:20px; 

} 


Añadiremos algunos "paddings"en nuestro archivo "estilos.css": 


body ( 

padding-left: 5px; 

font-family: Georgia, "Times New Roman", Serif; 
color: e2333; 

Eont size noa; 


} 


w 
font-family: Helvetica, Geneva, Arial, Sans-serif; 


) 


nomi 


color:+3366FF; 
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address { 


J#conti 
| rnar gin-top: 10px; 


| E ingut iag . . 
Et 





Y la visualización del archivo "index.html" en el navegador será así: 
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1. Introducción 
Craáter de Santa-Margarida 
La Garrotxa es una comarca de transición entre la montaña y 
el valle que se extiende entre el Pirineo y la Sierra Transversal. 
A pesar de la complejidad de la comarca, se distinguen dos 5 
zactoraz hian difaranciados > delimitador: la Alta Carrotva xl 
4 » 
EI E 


2.5.5. Border, border-top, border-right, border-bottom, 
border-left 


Cada una especifica la anchura, el color y el estilo de cada uno de los bordes, 
a excepción del "border" que lo aplica a todos los lados en general. 


Los valores que se pueden especificar están separados por un espacio: anchura 
(en píxeles o en porcentaje), el color (en RGB) y estilo. Son propiedades que 
no heredan el valor si no se especifica, son aplicables elementos y las soportan 
todos los navegadores. 


Los valores que podemos especificar en el estilo del borde son: 


e None: ningún estilo. 

e Dotted: línea de puntos. 

e Dashed: línea de barras. 

e Solid: línea sólida. 

e Double: doble grueso de línea. 

e Groove, ridge, inset y outset: diferentes estilos de bordes en 3D. 


A continuación, podemos ver algunos ejemplos: 


p{ 
border: lpx solid #FFFFFF; 
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Añadiremos el siguiente código en el .css para conseguir que nuestra tabla 


tenga un pequeño filete: 
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margin-top:10px; 
) 


contenido img ( 
padding="igHht:10px; 


padding-bottom:5px; 


) 
lol 
Archivo Edición Formato Ver Ayuda 
a ng-left:5px; 


contingut table £ 
border:1px solid #3366FF; 
p naer A 10px; 


#contingut address { 
margin-top:10px; 


#contingut img { 





Vemos cómo se visualiza en nuestro navegador: 


Introducción a la gastronomía de la Garrotxa - Mozilla Firefox Al ES 
Archivo Editar Ver Historial Delicious Herramientas Ayuda 


9 5 el xX A El kd ta | file:///C:/Documents Y * (IGl- - 




















Preparad un puré seco de castañas. Para hacerlo hay que 
escaldarlas, pelarlas y hervirlas en un recipiente donde el 
agua las cubra. Después se pasan por el cedazo. A parte, se 
elabora el mazapán; Siguiendo la misma receta de los panallets 
de piñones. De la masa resultante, tomar una tercera parte y 
mezclarla con el puré de castaña. Trabajarlo sobre el mármol 
espolvoreado con azúcar y dividirlo en piezas redondeadas. 
Untarlas con clara de huevo batida y con unas gotas de agua y 
espolvorearlas con azucar. Finalmente hay que cocerlas a 
horno vivo (200 o 220 grados) entre 6 y 7 minutos. 


3. Estadísticas 


Superficie 734,2 km2 


Población 46.060 habitantes 
Densidad 62,7  habitantes/km2 





Pere Barnola 
Diagonal, 376, 8A 
08037 Barcelona 


Documento conforme W3C XHTML 1.0/CSS 2.0/WAIAA 








X 


4] |> 
[S | Teminado E IM 





Hemos añadido un filete de 1 píxel de grueso, de estilo "sólido" y de color azul. 


2.5.6. Border-width 


Especifica el grueso del borde. Este valor tiene que ser bastante grande para 
apreciarlo correctamente. Podemos especificar a la vez las cuatro propiedades 
del grueso del borde. Cada uno de los valores corresponde al grueso del borde 
superior, derecho, inferior e izquierdo, respectivamente. Si sólo tenemos un 
valor, se aplica a todos los lados. Si tenemos dos o tres valores, los valores 
restantes se toman del lado opuesto, tal como hemos visto con el "margin" o 


el "padding". 
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Los valores que se pueden especificar son: una de las tres palabras clave ("thin", 
"médium" o "tic") o un número entre el 1 y el 4. Es una propiedad que no 
hereda del padre el valor si no se especifica, es aplicable a elementos y la so- 


portan todos los navegadores. 


pl 
border-width:thin; 


) 


2.5.7. Border-top-width, border-right-width, 
border-bottom-width, border-left-width 


Especifican la anchura del borde superior, lateral derecho, inferior o lateral 


izquierdo de un elemento. 


Los valores que se pueden especificar son: una de las tres palabras clave ("thin", 
"médium" o "thick”) o un número entre el 1 y el 4. Es una propiedad que no 
hereda del padre el valor si no se especifica, es aplicable a todos los elementos 
y la soportan todos los navegadores. 


«Caixa 4 
border-bottom-width: TPX; 
border-top-width: 4px; 
border-left-width: lpx; 
border-right-width: 2px; 
) 


2.5.8. Border-style 

Especifica el estilo de hasta los cuatro bordes de la caja de un elemento a la vez. 
Los valores que se pueden especificar son una de las siguientes palabras clave: 
none, dotted, dashed, solid, double, groove, ridge, inset, outset, hidden. Es 
una propiedad que no hereda del padre el valor si no se especifica, es aplicable 
a elementos y la soportan todos los navegadores. 

pl 
border-style:double; 


) 


2.5.9. Border-top-style, border-right-style, border-bottom-style, 
border-left-style 


Especifica el estilo del borde de un lado específico del elemento. 
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Los valores que se pueden especificar son una de las siguientes palabras clave: 
none, dotted, dashed, solid, double, groove, ridge, inset, outset, hidden. Es 
una propiedad que no hereda del padre el valor si no se especifica, es aplicable 


a todos los elementos y la soportan todos los navegadores. 


.Caixa ( 
border-bottom-style: dotted; 
border-top-style: groove; 
border-left-style: dashed; 
border-right-style: solid; 
) 


2.5.10. Border-color 
Especifica el color de hasta los 4 bordes de la caja de un elemento a la vez. 


Los valores que se pueden especificar pueden ser: un valor rgb, un valor he- 
xadecimal, "transparente" o uno de los 17 nombres de color predeterminados 
que hemos visto antes en la propiedad "color". Por defecto, coge la propiedad 
de color del elemento. Es una propiedad que no hereda del padre el valor si 
no se especifica, es aplicable a todos los elementos y la soportan todos los na- 
vegadores. 


pl 
border-color: #000000; 
} 


2.5.11. Border-top-color, border-right-color, border-bottom-color, 
border-left-color 


Especifica el color de un borde concreto de la caja del elemento. 


Los valores que se pueden especificar son: un valor rgb, un valor hexadecimal, 
"transparente" o uno de los 17 nombres de color predeterminados que hemos 
visto antes en la propiedad "color". Por defecto coge la propiedad de color del 
elemento. Es una propiedad que no hereda del padre el valor si no se especifica, 


es aplicable a todos los elementos y la soportan todos los navegadores. 


«Caixa 
border-bottom-color: +CC9933; 
border-top-color: +00FF99; 
border=1ett=color: +999900 ; 
ordenado Oo Oe aa 
} 


La presentación 
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2.5.12. Width 


Especifica la anchura del área de contenido de un elemento. 


Los valores que se pueden especificar pueden ser: uno, un porcentaje, o "auto". 


Es una propiedad que no hereda, es aplicable a todos los elementos de blog y 
elementos de sustitución, y la soportan todos los navegadores. 


A continuación, especificaremos una anchura en la parte del menú de nuestro 
ejemplo: 
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contenido table { 


border:1lpx solid +3366FF; 


tcontenido address ( 


margin-top:10px; 





contenido img ( 
padding=*igHht:10px; 
padding-bottom:5px; 
y 


ola 


Archivo Edición Formato Ver Ayuda 


#capçalera { 
pa ng-1Teft:5px; 


¿menu { 
width: 30%; 
background-color :#e5e5e5; 
padding-top: 5px; 
padding-bottom: 5px; 
e ng-left: 5px; 


contingut £ 





Para poder visualizar cómo afecta el hecho de haber asignado una medida 
relativa del 30% a nuestro menú, hemos añadido un color de fondo al menú. 


Veremos cómo se visualiza en el navegador este código: 


Archivo Editar Ver Historial Delicious Herramientas Ayuda 


a= EN” CAC X & El A mi (E file:///C:/Documents; LY 7 
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[FF [Terminado 


Para comprobar el efecto de haber asignado una medida relativa al menú, po- 
demos estirar y encoger la ventana de nuestro navegador. De esta manera, po- 


dremos ver cómo el contenido se ajusta a la medida especificada: 


La presentación 
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2.5.13. Min-width 


Protege el elemento de ser demasiado estrecho. 


Los valores que se pueden especificar pueden ser: una medida o un porcenta- 
je. Por defecto es "0". Es una propiedad que no hereda del padre el valor si 
no se especifica, es aplicable a todos los elementos excepto los elementos de 
no sustitución y los elementos de tabla, y la soportan todos los navegadores 
excepto el Internet Explorer. 


content ( 
min-width: 25px; 
i 


2.5.14. Max-width 


Protege el elemento de ser demasiado amplio. 


Los valores que se pueden especificar pueden ser: una medida, un porcentaje 
o "none". Por defecto es "none". Es una propiedad que no hereda del padre 
el valor si no se especifica, es aplicable a todos los elementos, excepto a los 
elementos de no sustitución y a los elementos de tabla, y la soportan todos los 
navegadores excepto Internet Explorer. 


#content{ 
max width: 100%; 


) 
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2.5.15. Height 


Especifica la altura del área de contenido del elemento. 


Los valores que se pueden especificar pueden ser: una medida, o "auto". Por 
defecto es "auto". Es una propiedad que no hereda del padre el valor si no 
se especifica, es aplicable a todos los elementos de blog y los elementos de 
sustitución, y la soportan todos los navegadores excepto Internet Explorer. 


fcontent [ 
height: 100%; 


) 


2.5.16. Min-height 


Protege el elemento de ser demasiado pequeño en altura. 


Los valores que se pueden especificar pueden ser: una medida o un porcenta- 
je. Por defecto es "0". Es una propiedad que no hereda del padre el valor si 
no se especifica, es aplicable a todos los elementos excepto los elementos de 
no sustitución y los elementos de tabla, y la soportan todos los navegadores 
excepto Internet Explorer. 


fcontent Í 
min-height: 20px; 
) 
2.5.17. Max-height 


Protege el elemento de ser demasiado alto. 


Los valores que se pueden especificar pueden ser: una medida, o "auto". Por 
defecto es "auto". Es una propiedad que no hereda del padre el valor si no 
se especifica, es aplicable a todos los elementos de blog y los elementos de 


sustitución, y la soportan todos los navegadores excepto Internet Explorer. 
fcontent [ 
max-height: 100%; 


) 


2.5.18. Overflox 


Determina la manera de visualizar los elementos hijos de un elemento que no 


caben en el área de contenido de su padre. 


Los valores pueden ser: 
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e Visible: si el contenido del elemento excede las dimensiones se mostrará 
igualmente. El comportamiento puede ser variable dependiendo del na- 
vegador. 


e Hidden: el elemento se mostrará correctamente, mientras que el conteni- 


do que exceda de las dimensiones no será visible. 


e Auto: si el contenido excede las dimensiones del padre o contenedor, apa- 
recerán las barras de "scroll" para posibilitar la lectura. 


e Scroll: siempre aparecen las barras de "scroll". En caso de que el contenido 
no exceda las dimensiones, éstas quedarán deshabilitadas. En el momento 


en que el contenido exceda las dimensiones, se habilitarán. 
Por defecto, es "visible". Es una propiedad que no hereda del padre el valor si 
no se especifica, es aplicable a todos los elementos de blog y los elementos de 
sustitución, y la soportan todos los navegadores. 
#content{ 
oyertlow:. autos 
) 
2.5.19. Clip 


Define qué parte del contenido será visible. 


Los valores que se pueden especificar pueden ser: una forma, o "auto". La forma 


se define de la siguiente manera: 

Reca (Depp OO AO) 
Donde los valores corresponden a superior, derecha, inferior e izquierda. Este 
ejemplo se refiere a un rectángulo que empieza 5px desde la parte superior y 
10px desde la izquierda y tiene 100px de anchura y 50px de altura. 
Por defecto, es "auto". Es una propiedad que no hereda del padre el valor si 
no se especifica, es aplicable a todos los elementos con posición absoluta, y la 
soportan todos los navegadores excepto Internet Explorer. 


2.6. Propiedades de disposición: posicionamiento 


Las propiedades que nos permitirán modificar el posicionamiento de los ele- 


mentos son las siguientes: 
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2.6.1. Display 


Determina cómo se mostrará un elemento. Los valores que podemos especi- 


ficar son: 


e Blog: este valor provoca que un elemento genere una caja de blog princi- 


pal, como si hubiera un salto de línea antes y después del elemento. 


e Inline: este valor provoca que un elemento genere unas o más cajas de 
línea, es decir, que los elementos se mostrarán uno tras otro en la misma 


línea mientras quepan allí. 


e List-item: este valor provoca que un elemento genere una caja de blog 


principal y una caja de línea de tipo "list-item". 


e Marker: este valor declara que el contenido generado antes o después de 


una caja será un marcador. 


e None: Este valor provoca que un elemento no genere ninguna caja (es 
decir, el elemento no tiene ningún efecto sobre la composición) y los ele- 
mentos descendentes tampoco generen cajas. Se tiene que destacar que es- 
te valor no crea una caja invisible, sino que hace que el elemento desapa- 
rezca del todo. Esta es la diferencia hacia las propiedades sobre visibilidad, 
que provocan que un elemento pueda ser invisible pero siga ocupando un 


espacio en la página. 


e Run-in y compact: estos valores crean cajas de blog o de línea según el 
contexto y tienen un comportamiento como el que conocemos para las 


listas de definición. 


e Table, inline-table, table-row-group, table-column, table-column- 
group, table-header-group, table-footer-group, table-row, table- cell y 
table-capt: Estos valores provocan que un elemento se comporte como 


un elemento tabla. 


El valor por defecto de la propiedad display es "inline". Es una propiedad que 
no hereda del padre el valor si no se especifica, es aplicable a todos los elemen- 
tos con posición absoluta, y la soportan todos los navegadores. 


#contenido { 
chtsjollewys NO AS 
) 
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2.6.2. Position 


Especifica el método por el cual se determina la posición de la caja del elemen- 
to. Los elementos que no son "estáticos" utilizan las propiedades de posicio- 


namiento "top, right, bottom, y left" que veremos más adelante. 


Los valores que podemos especificar son: 


e Static: con este valor, la caja se sitúa dentro del flujo normal de la página. 


e Relative: la posición de la caja se ajusta en relación con su posición normal 
dentro de la página. Cuando una caja se posiciona relativamente, la caja 


siguiente se sitúa como si aquélla no se hubiera desplazado. 


e Absolute: las cajas son sacadas de su flujo natural de página y su posición 
se especifica con las propiedades "left", "right", "top","bottom". Estas pro- 
piedades especifican los desplazamientos con respecto al blog padre, por 
lo cual los elementos posicionados absolutamente no tienen ninguna in- 


fluencia en las cajas siguientes. 


e Fixed: el posicionamiento "fixed" es una subcategoría del posicionamien- 
to absoluto. La única diferencia es que, para una caja posicionada fija, el 
blog padre es establecido por el acceso visual (la pantalla del monitor) y 
el elemento no se mueve cuando se realiza un desplazamiento. Eso quiere 
decir que cuando se hace scroll en la página, estos elementos mantienen 


su posición fija. 


El valor por defecto es "static". Es una propiedad que no hereda del padre el 
valor si no se especifica, es aplicable a elementos con posición absoluta y la 
soportan todos los navegadores. 


tfcontenido ( 
position:absolute; 
EOP OP 
NSE S20: 


) 


2.6.3. Top, right, bottom, left 


Especifica la posición de un elemento fijo, absoluto, o posicionado de forma 


relativa. 


Los valores que se pueden especificar son: una medida, un porcentaje o "auto". 
Por defecto, es "auto". Es una propiedad que no hereda del padre el valor si no 
se especifica, es aplicable a elementos con una posición diferente a estática y 


la soportan todos los navegadores. 
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En el ejemplo de la propiedad "position" anterior el elemento con id contenido 
de nuestro documento se colocaría absolutamente en 20px de separación de 


la parte superior y de la parte izquierda. 


2.6.4. Float 


Mueve un elemento a derecha o izquierda del elemento del que es hijo hasta 
que no encuentra otro elemento de blog de nivel. Los elementos flotados son 


eliminados del flujo normal de la página. 


Los valores que se pueden especificar son: "left", "right" o "none". Por defecto, 
es "none". Es una propiedad que no hereda del padre el valor si no se especifica, 


es aplicable a todos los elementos y la soportan todos los navegadores. 


fcontenido ( 
float: left; 


) 


Nuestro siguiente objetivo es hacer que el menú quede a la izquierda del con- 


tenido; por lo tanto, añadiremos un "float:left" a nuestro código: 


body 4 

padding-left: 5px; 

font-family: Georgia, "Times New Roman", Serif; 
COLO ASS SS, 

Font SAE OA 


) 


ld 
font-family: Helvetica, Geneva, Arial, Sans-serif; 


) 


122 d 
color:1t3366FF; 


) 


cabecera ( 
padding-left:5px; 
) 


#menu { 

AMO AS 

width: 304; 
background-color:te5e5e5; 
padding-top:5px; 
padding-bottom:5px; 


padding-left: 5px; 
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contingut table { 
border:1px solid #3366FF; 


$ addr 
e | 


ti 
float: eto - 
adding-right:10px; 
Padana bocas ap 








Vemos ahora cómo se visualiza el código en el navegador: 
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Cràter de SantaMargarida 


La Garrotxa es una comarca de transición entre la montaña y 
el valle que se extiende entre el Pirineo y la Sierra Transversal. X 


MIES, 








2.6.5. Clear 


Esta propiedad indica cuáles de los lados de la caja de un elemento no pueden 
quedar adyacentes a una caja flotante anterior. Esta propiedad sólo se puede 
especificar para elementos de flujo de blog (incluyendo también los elementos 
flotantes). 


Los valores tienen los siguientes significados: 


e Left: el margen superior de la caja generada se aumenta bastante para que 
su parte superior quede justo debajo de la parte inferior de cualquier caja 
flotante a la izquierda que aparezca antes en el documento. 


e Right: el margen superior de la caja generada se aumenta bastante para 
que su parte superior quede justo debajo de la parte inferior de cualquier 
caja flotante a la derecha que aparezca antes en el documento. 


e Both: la caja generada se mueve debajo de todas las cajas flotantes que 


aparezcan antes en el documento. 


e None: no existe ninguna restricción a la posición de la caja del elemento 


respecto de los elementos flotantes. 


Por defecto, es "none". Es una propiedad que no hereda del padre el valor si 
no se especifica, es aplicable a todos los elementos y la soportan todos los 
navegadores. 


contenido ( 


clear: both; 
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2.6.6. Z-index 


Especifica en qué orden de superposición se apilan los elementos unos sobre 
los otros. Nos dice el nivel de profundidad en que se encuentra cada elemen- 
to. Normalmente, los últimos elementos que aparecen en el código del docu- 
mento se apilan sobre los elementos que aparecen antes. Cuanto mayor sea el 


"z-index", más por debajo de él estará. 


Los valores que se pueden especificar pueden ser: un número entero, o "auto". 
Por defecto, es "auto". Es una propiedad que no hereda del padre el valor si 
no se especifica, es aplicable a elementos posicionados, y la soportan todos 


los navegadores. 
#contenido { 
position:absolute; 
z-index: 4; 
) 


2.6.7. Visibility 


Hace que un elemento sea completamente transparente sin eliminarlo del flu- 


jo del documento. 


Los valores que podemos especificar son: 


e Visible: el elemento es visible. 


e Hidden: el elemento es invisible (totalmente transparente), pero sigue 


afectando a la composición. 


e Collapse: si se utiliza en elementos que no sean filas o columnas de una 


tabla, "collapse" tiene el mismo significado que "hidden". 


Por defecto, es "visible". Es una propiedad que hereda del padre el valor si 
no se especifica, es aplicable a todos los elementos y la soportan todos los 


navegadores. 
En el siguiente ejemplo el contenido estaría escondido. 
contenido ( 


visibility:hidden; 
} 
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2.7. Propiedades de disposición: fondo 


Las propiedades que nos permitirán modificar el fondo de los elementos son 
las siguientes: 


2.7.1. Background-attachment 


Determina si una imagen aparece fijada o acompañará el contenido si despla- 


zamos la página haciendo scroll. 


Los valores que se pueden especificar pueden ser: "scroll" o "fixed". Por defecto, 
es "scroll". Es una propiedad que no hereda del padre el valor si no se especifica, 


es aplicable a elementos, y la soportan todos los navegadores. 


fcontingut { 
background-attachment: fixed; 


} 
2.7.2. Background-color 
Especifica el color de fondo del contenido del elemento. 


Los valores que se pueden especificar pueden ser: un valor rgb, un valor hexa- 
decimal, "transparente", o uno de de los 17 nombres de colores predefinidos. 
Por defecto, es "transparente". Es una propiedad que no hereda del padre el 
valor si no se especifica, es aplicable a elementos y la soportan todos los na- 
vegadores. 


Antes hemos utilizado el background-color para mostrar visualmente el efecto 
de la anchura del menú. Ahora añadiremos colores de fondo a otras partes de 


nuestro archivo: 


body { 

padding-left: 5px; 

font-family: Georgia, "Times New Roman", Serif; 
COLor 3333337 

background-color: +d6d6d6; 

fone- size pX, 


) 


Ad 
font-family: Helvetica, Geneva, Arial, Sans-serif; 


) 


12 
color:$+t3366FF; 


) 
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adding-left: 5px; 

ont-family: Georgia,"Times New Roman”, serif; 
color: 4333333; 

background-color: *d6d6d6; 
AAA 11px; 


hi í 
p eT: Helvetica, Geneva, Arial, sans-serif; 





Si visualizamos el código anterior en un navegador veremos que el efecto es 
bastante evidente: 
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La gastronomía en la Garrotxa 


Menú 1. Introducción 


1. Introducción 


2. Platos típicos 
3. Estadisticas 


Cràter de Santa Margarida 


Baixa Garrotxa. 


La primera, de relieve dificil, con poca vegetación, llena de 
congostos, simas y cuevas, da nombre a la comarca - Garrotxa 
= tierra áspera y rota -, y un placer para los excursionistas; la 
Baixa Garrotxa, de tierras suaves, plana, con prados 


abundantes y corrientes de agua. 
2. Platos típicos 


PANELLETS DE CASTANYA 


Ingredientes: 


2.7.3. Background-image 


Con esta propiedad podemos especificar una imagen de fondo para un ele- 


mento. 


Los valores que se pueden especificar pueden ser: una dirección URL o "none". 
Por defecto es "none". Es una propiedad que no hereda del padre el valor si no 
se especifica, es aplicable a elementos y la soportan todos los navegadores. 


contenido ( 
background-image:url(/imgs/mural.j3pg); 


) 


2.7.4. Background-position 


La Garrotxa es una comarca de transición entre la montaña y 
el valle que se extiende entre el Pirineo y la Sierra Transversal. 
A pesar de la complejidad de la comarca, se distinguen dos 

sectores bien diferenciados y delimitados: la Alta Garrotxa y la 


4] |> 
[FE | Teminado MIdEOIM y 

















X 





Especifica la posición inicial de la imagen de fondo del elemento. 


Como valores, podemos especificar una posición horizontal seguida de una 
posición vertical. Cada una de las dos posiciones las podemos especificar in- 
dicando una medida, un porcentaje o una de las 5 palabras clave de posicio- 


namiento. Por defecto es "0 0". 
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Es una propiedad que no hereda del padre el valor si no se especifica, es apli- 
cable a elementos y la soportan todos los navegadores. 


contenido ( 
background-position:left top; 
) 


2.7.5. Background-repeat 


Determina de qué manera la imagen de fondo se repite en el elemento. 


Los valores que podemos especificar son: repeat, repeat-x, repeat-y, y no-re- 
peat. 


e repeat: la imagen se repite horizontal y verticalmente. 
e repeat-x: la imagen se repite sólo horizontalmente. 
e repeat-y: la imagen se repite sólo verticalmente. 


e no-repeat: la imagen no se repite. 


Por defecto es "repeat". 


Es una propiedad que no hereda del padre el valor si no se especifica, es apli- 


cable a elementos y la soportan todos los navegadores. 


#contenido { 
background-repeat :repeat-x; 


i 


2.7.6. Background 


Nos permite especificar las 5 propiedades del background al mismo tiempo. 


Los valores a especificar son los valores de las propiedades de background- 
attachment background-color background-image background-position back- 
ground-repeat. Si se omite algún valor, se aplicará el valor por defecto de la 


propiedad. 


Es una propiedad que no hereda del padre el valor si no se especifica, es apli- 
cable a elementos y la soportan todos los navegadores. 


#contenido { 
background: fixed url (/imgs/ad.png) left top no repeat; 
) 
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2.8. Elementos 


En este capítulo, veremos las propiedades específicas de ciertos elementos. Bá- 


sicamente, las listas y las tablas. 


2.8.1. Listas 


Comenzamos con las propiedades específicas que podemos dar a las listas de 
un documento (ul, ol, dl). 


List-style-type 


Especifica el tipo de marcador de los ítems de la lista. 


Los valores que podemos especificar son: 


e disc: un disco. 

e circle: un círculo. 

e square: un cuadrado. 

e decimal: números decimales empezando por 1. 

e decimal-leading-zero: números decimales empezando por 0. 

e lower-roman: números romanos en minúsculas. 

e upper-roma: números romanos en mayúsculas. 

e  lower-greek: letras griegas en minúsculas (alfa/a, beta/P, gamma/y). 

+  lower-latin: letras ASCII en minúsculas. 

+  upper-latin: letras ASCIH en mayúsculas. 

*  armenian: numeración armenia tradicional (ayb/ayp, ben/pen, gim/ 
keem...). 

e georgian: numeración georgiana tradicional 

e lower-alpha: igual que lower-latin 

e upper-alpha: igual que upper-latin. 


e none: no saldrá ningún marca. 


El valor por defecto es "disc". 


Es una propiedad que hereda del padre el valor si no se especifica, es aplicable 


a elementos de una lista y la soportan todos los navegadores. 


le: 
list-style-type:georgian; 
) 


Cambiaremos, en nuestro ejemplo, el estilo de la visualización de la lista orde- 


nada; para hacerlo, nos referiremos a los elementos ol dentro de la capa menú: 


body { 


padding-left: 5px; 
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padding-bottom:5px; 
i 


ll estils.css - Bloc de notas -|0| x 


Archivo Edición Formato Yer Ayyda 
a re or :#e5e5e5; 
padding-top: 5px; 
padding-bottom: 5px; 
pas Spx; 









#menu ol f 
paa e-type:circle; 1 


Fcontingut ( 
un 30px 10px Opx 32%; 
padding-left :5px; 





Si lo visualizamos en un navegador, veremos lo siguiente: 
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1. Introducción 


Menú 
o Introducción 


o Platos típicos 
o Estadisticas 


Cráter de Santa Margarida 


La Garrotxa es una comarca de transición entre la montaña y 
el valle que se extiende entre el Pirineo y la Sierra 
Transversal. 

A pesar de la complejidad de la comarca, se distinguen dos 
sectores bien diferenciados y delimitados: la Alta Garrotxa y la 
Baixa Garrotxa. 

La primera, de relieve difícil, con poca vegetación, llena de 
congostos, simas y cuevas, da nombre a la comarca - Garrotxa 
= tierra áspera y rota -, y un placer para los excursionistas; la 
Baixa Garrotxa, de tierras suaves, plana, con prados 
abundantes y corrientes de agua. 


2. Platos típicos 
PANELLETS DE CASTANYA 


X 


4] | > 
[Fs | Terminado MIaEsO [IM | 





Podemos comprobar cómo la lista ordenada del menú que antes aparecía con 


números ahora nos aparece con círculos. 


List-style-position 


Especifica la posición del marcador de la lista en relación con la caja principal. 


Los valores que se pueden especificar son: 


e outside: el marcador se sitúa fuera de la caja principal 
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e inside: el marcador queda en el interior de la caja junto con el texto. 


El valor por defecto es "outside". 


Es una propiedad que hereda del padre el valor si no se especifica, es aplicable 
a todos los elementos de una lista y la soportan todos los navegadores. 


At 
list-style-type:georgian; 
) 


List-style-image 
Especifica la imagen que se utilizará como marcador. 


Los valores que se pueden especificar son o bien una dirección URL o bien 


"none". Por defecto será "none". 


Es una propiedad que hereda del padre el valor si no se especifica, es aplicable 


a todos los elementos de una lista y la soportan todos los navegadores. 


li A 
list-style-image:url(/imgs/ad.png); 
} 


List-style 


Nos permite especificar las propiedades individuales del "list-style" al mismo 
tiempo. 


Los valores a especificar son los valores de las propiedades de list-style-type 
list-style-position list-style-image. Si se omite algún valor, se aplicará el valor 
por defecto de la propiedad. 


Es una propiedad que hereda del padre el valor si no se especifica, es aplicable 
a todos los elementos de una lista, y la soportan todos los navegadores. 


1 A 
list-style:decimal-leading-zero outside url (/imgs/ad.png); 


) 


2.8.2. Tablas 


Las propiedades que podemos modificar específicamente en el caso de las ta- 


blas son las siguientes: 
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Border-collapse 


Determina si las celdas de tablas tienen bordes separados o comparten los bor- 


des con las celdas adyacentes, grupos de filas y columnas o con la misma tabla. 


Los valores que se pueden especificar son: "collapse", o "separate". Por defecto, 
será "separate". Es una propiedad que hereda del padre el valor si no se especi- 
fica, es aplicable a elementos de tipo table y la soportan todos los navegadores. 


tablel 
border-collapse: separate 


} 
Border-spacing 
Determina el espacio entre las parejas de bordes. 


Podemos darle uno o dos valores numéricos. Si los dos valores están presentes, 
el primero determina la distancia horizontal y el segundo la distancia vertical. 
El valor por defecto será "0". 


Es una propiedad que hereda del padre el valor si no se especifica, es aplicable 
a todos los elementos de tipo table con bordes separados, y la soportan todos 


los navegadores. 


Daremos a nuestro ejemplo un espacio en los bordes de nuestra tabla. Con el 


fin de hacerlo añadiremos el siguiente código: 


body { 

padding-left: 5px; 

font-family: Georgia, "Times New Roman", Serif; 
COMAS SS SS 

background-color: +d6d6d6; 

font size MPX; 


} 


m 
font-family: Helvetica, Geneva, Arial, Sans-serif; 


} 


h2 ( 
Color TA 


) 


cabecera ( 
padding-left:5px; 
) 
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CURAS 


contingut { 
in: 3 1 px 32%; 
a 


ingut table { 
border:1px solid #3366FF; 
A 10px; 


contingut address { 
margin-top:10px; 


Y lo visualizaremos de la siguiente manera: 
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Introducción a la gastronomia de la Garrotxa - Mozilla Firefox -Iof x] 
Archivo Editar Ver Historial Delicious Herramientas Ayuda 


@ CX GY T aA mí] [2 / fie:///C:/Documents L7 + [Glz 
Receta: 


Preparad un puré seco de castañas. Para hacerlo hay que 
escaldarlas, pelarlas y hervirlas en un recipiente donde el 
agua las cubra. Después se pasan por el cedazo. A parte, se 
elabora el mazapán; Siguiendo la misma receta de los 
panallets de piñones. De la masa resultante, tomar una 
tercera parte y mezclarla con el puré de castaña. Trabajarlo 
sobre el mármol espolvoreado con azúcar y dividirlo en piezas 
redondeadas. Untarlas con clara de huevo batida y con unas 
gotas de agua y espolvorearlas con azucar. Finalmente hay 
que cocerlas a horno vivo (200 o 220 grados) entre 6 y 7 
minutos. 


























3. Estadísticas 


Superficie 734,2 km2 


Población 46.060 habitantes 
Densidad 62,7 habitantes/km2 





Pere Barnola 
Diagonal, 376, SA 
08037 Barcelona 


Documento conforme W3C XHTML 1.0/CSS 2.0/WAIAA 











v 


4] | » 
EAT, ERE 


Vemos cómo ahora hay más espacio entre el contenido y las celdas de nuestra 


tabla. 


Empty-cells 


Oculta o muestra los bordes de las celdas vacías. 


Los valores pueden ser: "show" o "hide". Por defecto, el valor será "show". 


Es una propiedad que hereda del padre el valor si no se especifica, es aplicable 
a todos los elementos de tipo "table" con bordes separados y la soportan todos 


los navegadores excepto Internet Explorer. 


Table-layout 


Determina qué algoritmo hay que utilizar para el navegador a la hora de vi- 


sualizar las celdas, filas y columnas de una tabla. 


Los valores pueden ser: "auto" o "fixed". 


e fixed: permite que el navegador renderice más rápidamente el contenido 
de la tabla que de la forma automática. La presentación horizontal sólo 
depende de la anchura de la tabla y las columnas, no del contenido de 
la tabla. Utilizando este método se puede visualizar la tabla una vez la 


primera fila se ha descargado correctamente. 
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e auto: la anchura de la columna se determina por la anchura mayor del 
contenido indivisible dentro de la celda. El navegador tiene que leer toda 
la tabla antes de mostrarla. 


Por defecto, el valor será "auto". 


Es una propiedad que hereda del padre el valor si no se especifica, es aplicable 
a todos los elementos de tipo "table" que no tengan la propiedad "width" es- 
pecificada como "auto", y la soportan todos los navegadores excepto Internet 
Explorer. 


table{ 
table-layout: fixed 
} 


Caption-side 


Determina la posición del título de la tabla, si éste va encima o debajo de la 
tabla. 


Los valores pueden ser: "top" o "bottom". Por defecto, el valor será "top". 


Es una propiedad que hereda del padre el valor si no se especifica lo contrario, 
es aplicable a todos los elementos de tipo tabla, y la soportan todos los nave- 
gadores excepto Internet Explorer. 


En el caso de las tablas, hay propiedades que ya hemos visto anteriormente que 
tienen un efecto especial cuando se aplican a tablas o celdas. Son el "width" 


y el "vertical-align". 
Width 


Determina una anchura mínima de una tabla o de una celda. 


Los valores pueden ser un número, un porcentaje, o "auto". Por defecto será 


"auto". 


Es una propiedad que no hereda del padre el valor si no se especifica, es apli- 
cable a elementos de tipo table, table-column y table-cell y la soportan todos 


los navegadores. 
Vertical-align 


Determina la alineación vertical del texto dentro de la fila o celda. 


Los valores pueden ser: "baseline", "top", "bottom", o "middle". Por defecto será 


"baseline". 
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Es una propiedad que no hereda del padre el valor si no se especifica, es apli- 
cable a elementos de tipo "table-cell", y la soportan todos los navegadores. 


2.9. Otros 


2.9.1. Herencia 


Una de las características más importantes del CSS es la que se conoce como 
herencia u orden en cascada. Lo que significa trabajar en cascada se puede 
entender fácilmente a partir del ejemplo siguiente. 


Imaginad que queréis crear un documento que tenga toda la tipografía de 
color gris, de una medida de 12 píxeles, sobre un fondo claro. Para conseguirlo, 
tendréis que definir la regla siguiente: 


El 
color:+t33ff00; 
background-color :tfteeeeee; 
font-size: 12px; 


) 


Esta regla de selector universal (el asterisco) afectará a todos los elementos del 
documento. Sin embargo, poned por caso que no queréis que la cabecera del 
primer nivel tenga el mismo color que el resto de elementos, sino que lo que 


queréis es que sea de color rojo. Por eso habrá que añadir una segunda regla: 


AS 


COLORS 


El navegador sobrescribirá el valor del color selector h1 sobre el selector uni- 
versal, pero el selector h1 heredará el resto de propiedades de la regla más ge- 
neral, y mostrará, por lo tanto, la misma medida y el mismo color de fondo 


que el resto de elementos. 


Se puede decir que las diferentes reglas compiten entre ellas según un orden 
de jerarquía o prioridad, de manera que las propiedades de una regla de un 


orden superior prevalecerán siempre sobre las de un orden inferior. 


Este orden en cascada separa las reglas en seis grupos diferentes según el tipo 
de selector utilizado. El listado de los seis grupos está ordenado de mayor a 
menor prioridad. En términos generales, tendrán siempre preferencia los tipos 


de selectores de más precisión frente a los selectores más generales. 
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Los seis grupos en que quedan agrupadas las reglas, según el tipo de selector 


utilizado, ordenados de mayor a menor prioridad, son los siguientes: 
Propiedades que contengan la expresión "limportant" detrás de su valor: 
HLI 
colowezees!. ATO O AE AE 
} 
Estilos declarados como valor del atributo "style" del elemento XHTML: 
<hl style="color red; ">Lorem Ipsum</p> 
Reglas definidas por uno o más selectores del tipo ID: 
#vermell ( 
caror: red; 
} 
Reglas definidas por uno o más clases, atributos o pseudoselectores: 
TOJORN 
color:red; 
i 
p:first-letter&#160;{ 
COMORES 
} 
Reglas que contienen uno o más selectores XHTML: 
nl ( 
color:&#160; red; 


ll 


Reglas que contienen el selector universal: 


COLO red; 


2.10. Caso práctico: "dando estilos a nuestra primera web" 


A partir de los conocimientos que hemos adquirido, daremos estilo al docu- 
mento de ejemplo que construimos en el segundo capítulo mediante las hojas 
de estilo. 


La presentación 
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La idea es que partáis del código XHTML y CSS que tenéis a continuación, 
y modifiquéis las reglas para ir observando cómo los diferentes valores que 
hemos visto en cada una de las propiedades afectan a la visualización del do- 


cumento. 


Archivo XHTML llamado "index_estilos.html" 


<?xml version="1.0" encoding="UTF-8"?> 

IDOCTIRE! Mim PUBLIC: "Y M3IC/ Y DIO HTML LO SELLO EN 

"EUCDIAZUWW, MS LOBO TRY 3h DTD ata ls tácita 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="author" content="Pere Barnola"/> 

<meta name="keywords" content="garrotxa, gastronomía"/> 
<title>Introducción a la gastronomía de la Garrotxa</title> 

<link href="estilos.css" rel="stylesheet" type="text/css" /> 

</head> 

<body> 

<div id="cabecera"> 

<hl1>La gastronomía en la Garrotxa</h1> 

</div> 

<div id="menu"> 

<h1>Menú</h1> 

<ol> 

<li><a href="fintroduccion" title="Descripción del taller">Introducción</a></1li> 
<li><a href="fplatos_tipicos" title="Conocimientos a adquirir">Platos típicos</a></li> 
<li><a href="festadisticas" title="Guías que se utilizan">Estadísticas</a></1li> 
</o1> 

</div> 

<div id="contenido"> 

<h2>1. Introducción<a name="introduccion"></a></h2> 

<img src="foto_garrotxa.gif" 

alt="imagen del cráter de Santa Margalida" width="376" height="226" /> 
<p>La Garrotxa una comarca de transicitre la montaña y la planallanura, 
que se estentre el Pirineo y la Cordillera Transversal. Aun la 
complejidad de la comarca se distinguen dos sectores bien 

diferenciados y delimitados: la Alta Garrotxa y la Baja Garrotxa. 

La primera, ferega y de relieve difícil, con poca vegetación llena de 
desfiladeros, simas y cestos, da nombre a la comarca -Garrotxa, 'tierra 
áspera y rota'-, y un paradper a los excursionistas; la Baja 

Garrotxa, de sierras suaves y depresiones volcques, mplanera, con 
prados abundantes y corrientes de agua</p> 

<h2>2. Platos típicos<a name="platos_tipicos"></a></h2> 

<h3>PANECILLOS DE CASTAÑA</h3> 

<h4>Ingredientes:</h4> 


IES 


O FUOC + P08/93133/01507 60 La presentación 





<li> 500 gr de almendras ralladas</1li> 

<li> 450 gr de azúcar</li> 

<li> 200 gr de patatas</li> 

ALOE SAS S Ere 

<li> 2 huevos</li> 

<li> 250 gr de castañas</li> 

</ul> 

<h4>Receta:</h4> 

<p>Preparad un puré seco de castañas. Para hacerlo, hay que 
escaldarlas, pelarlas y hervirlas en un recipiente que las cubra 
con agua. Después, las pasáis por el cedazo. Aparte, elaborad el 
mazapán; siguiendo la misma receta de los panecillos de piñones. 
De la masa resultante, tomad una 1/3 parte y mezcladla con 

el puré de castaña. Trabajadlo sobre el mármol empolvado con 
azúcar y divididlo en piezas redondeadas. Untadlas con clara 

de huevo batida con unas gotas de agua y empolvadlas con azúcar. 
Finalmente, hay que cocerlas en el horno (200 o 220 grados) entre 
6 o 7 minutos.</p> 

<h2>3. Estadísticas<a name="estadisticas"></a></h2> 

<table> 

<tr> 


<td>Superficie</td> 


A 


ESSE 


A 


td>km2</td> 
SES 


<tr> 


A 


td>Población</td> 


A 


td>46.060</td> 


A 


td>habitantes</td> 


A 


/txr> 


ALIS? 


A 


td>Densidad</td> 


A 


td>62, 7</td> 





A 


td>habitantes/km2</td> 

S/T 

</table> 

<address> 

Pere Barnola<br /> 

Diagonal, 376, 8A<br /> 

08037 Barcelona 

</address> 

<p>Documento conforme <acronym title="World Wide Web Consortium" 
xml: lang="en">W3C</acronym> <a href="http://validator.w3.org/" 
title="Código revisado con el validador del W3C">XHTML 1.0</a>| 
<a href="http://jigsaw.w3.org/css-validator/" title="Hojas de 
estilo revisadas con el validador del W3C">CSS 2.0</a>| 


<a href="http://www.tawdis.net/taw3/online" 
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title="Nivel de adecuación doble A, conforme a las 

directrices de la Web Accessibility Initiative">WAI AA</a></p> 
</div> 

</body> 


</html> 


Código del archivo estilos.css resultante 


body { Validación final 


padding Sopa 





Finalmente, una vez hechas las 





HOMERO 6 E Om gta TS S NS RO mans Saki modificaciones, hará falta que 

SS os aseguréis de que el docu- 
mento CSS sea un documen- 

background-color: #eeeeece; to CSS válido mediante el Ser- 
vicio de Validación de CSS del 

} W3C. 

MEt 


font-family: Helvetica, Geneva, Arial, Sans-serif; 


) 


A2 

color:1t3366FF; 

border-bottom:1lpx solid +3366FF; 
} 

a 

color:1t3366FF; 

} 

a:hover { 

COLOE SES SECEES 


) 


cabecera ( 

border: dotted lpx #33CCFF; 
padding-left :5px; 

} 


#menu { 

AOS 

width: 30%; 

background: teeeeee; 
padding-top:5px; 
padding-bottom:5px; 
padding-left: 5px; 
background-color:te5e5e5; 
} 

#menu ol { 
list-style-type:circle; 
) 
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